<template>
  <!-- 分页 -->
    <el-pagination
      v-model:currentPage="page"
      :page-size="limit"
      :background="true"
      layout="total,sizes, prev, pager, next"
      :total="total"
      @size-change="changePageLimit"
      small="small"
      @current-change="changeCurPage"
      class="mt10"
    />
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, watch } from "vue";

import { listPageType } from "@/types";
import { useConfig } from "@/store";
const configStore = useConfig();

const { proxy } = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    modelValue?: string | number | string[] | number[] | any;
    listPage: any;
  }>(),
  {
    modelValue: "",
    listPage: {
      total: 0,
      page: 1,
    },
  }
);

const emit = defineEmits(["change"]);

const total = ref<number | string>(props.listPage.total);

const page = ref<number | string>(props.listPage.page);

const limit = ref<number | string>(configStore.getPageLimit);

const changePageLimit = (val: number) => {
  configStore.setPageLimit(val);
  limit.value = val;
  refresh();
};

const changeCurPage = (val: number) => {
  page.value = val;
  refresh();
};

const refresh = () => {
  emit("change", {
    total: total.value,
    limit: limit.value,
    page: page.value,
  });
};

watch(
  () => props.listPage,
  (val) => {
    total.value = props.listPage.total;
    page.value = props.listPage.page;
  },
  {
    deep: true,
  }
);
</script>